<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts饼图</title>
    <script src="../../style/echarts.min.js"></script>
    <link href="../../style/bootstrap-4.6.0-dist/css/bootstrap.css" rel="stylesheet">
</head>
<style>
    a {
        text-decoration: none;
    }

    button {
        margin: 10px;
    }

    th {
        width: 300px;

    }

    td {
        width: 200px;
        height: 80px;
    }
</style>
<body style="height: 100%; margin: 0">
    <div id="main" style="width:1150px;height:650px;"></div>

    <script src="../../style/jquery-3.3.1.js"></script>
    <script src="../../style/bootstrap-4.6.0-dist/js/bootstrap.js"></script>
    <script src="../../style/vue.js"></script>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var vm=new Vue({
            el:"#main",
            data:{
                dat:[

                ]
            },
            methods:{	//自定义方法
                getPie:function(){
                    $.get("../../ItemsType/selItemsType",{},function(data){	//通过ajax访问后端数据,进行交互
                        //alert(JSON.stringify(data));
                        //定义data变量,把后端的数据赋给data
                        var data=data.list;
                        console.log(data);
                        var len=data.length;
                        //清空dat数值的数据,保证数据的准确性
                        vm.dat=[];
                        for(var i=0;i<len;i++){		//for循环遍历数据
                            var info={};
                            //后端的字段也要变为value:---,name:---
                            info.name=data[i].itemsTypeName;
                            info.value=data[i].itemsAllCounts;
                            //循环的数据一值追加到vm.dat数组里面
                            vm.dat.push(info);
                        }
                        console.log(vm.dat);
                        let myChart = echarts.init(document.getElementById('main'));

                        myChart.setOption({
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                top: '5%',
                                left: 'center'
                            },
                            color: ['#ed969e','#17a2b8','#f5c6cb','#86cfda'],
                            series : [
                                {
                                    name: '货物数量饼状图',
                                    type: 'pie',    // 设置图表类型为饼图
                                    radius: ['40%', '70%'],////饼图中饼状部分的大小所占整个父元素的百分比
                                    avoidLabelOverlap: false,
                                    itemStyle: {
                                        borderRadius: 10,
                                        borderColor: '#fff',
                                        borderWidth: 2
                                    },
                                    label: {
                                        show: false,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
                                        position: 'center'//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '40',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },

                                    data:vm.dat     // 数据数组，name 为数据项名称，value 为数据项值

                                }


                            ]
                        })

                    })
                }
            },
            mounted(){
                this.getPie();		//自调用getPie()函数
                this.timer=setInterval(this.getPie,500000);	//每秒进行表格数据的更新
            }

        });
    </script>
</body>
</html>